<template>
  <a-modal
    v-model:open="open"
    :title="title"
    :maskClosable="false"
    :keyboard="false"
    @cancel="handleCancel"
    width="800px"
    :footer="null"
  >
    <div v-global-loading="modalLoadding">
      <a-form :model="form" ref="formRef" :labelCol="{span: 12}">
        <a-row :gutter="24">
          <a-col :span="12">
            <a-form-item
              label="姓名:"
              name="name"
              labelAlign="left"
              :labelCol="{span: 6}"
              :rules="[{required: true, message: '请填写姓名'}]"
            >
              <a-input
                v-model:value="form.name"
                placeholder="请输入姓名"
              ></a-input>
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item
              label="电话:"
              name="phone"
              labelAlign="left"
              :labelCol="{span: 6}"
              :rules="[{required: true, validator: phone}]"
            >
              <a-input
                v-model:value="form.phone"
                placeholder="请输入电话"
              ></a-input>
            </a-form-item>
          </a-col>
          <a-col :span="24">
            <a-form-item
              label="地址:"
              name="province"
              labelAlign="left"
              :labelCol="{span: 3}"
              :rules="[{required: true, message: '请选择地址'}]"
            >
              <a-cascader
                v-model:value="address"
                :options="options"
                :show-search="{filter}"
                placeholder="请选择地址"
                @change="onCascaderSelect"
              />
            </a-form-item>
          </a-col>
          <a-col :span="24">
            <a-form-item
              label="详细地址:"
              name="address"
              labelAlign="left"
              :labelCol="{span: 3}"
              :rules="[{required: true, message: '请输入详细地址'}]"
            >
              <a-textarea
                v-model:value="form.address"
                placeholder="请输入详细地址"
              />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item
              label="邮政编码:"
              name="postalCode"
              labelAlign="left"
              :labelCol="{span: 6}"
            >
              <a-input
                v-model:value="form.postalCode"
                placeholder="请输入邮政编码"
              ></a-input>
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item
              label="邮箱:"
              name="email"
              labelAlign="left"
              :labelCol="{span: 6}"
              :rules="[{required: false, validator: email}]"
            >
              <a-input
                v-model:value="form.email"
                placeholder="请输入邮箱"
              ></a-input>
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item
              label="是否为默认:"
              name="isDefault"
              labelAlign="left"
              :labelCol="{span: 6}"
            >
              <a-checkbox v-model:checked="form.isDefault"
                >默认收货地址</a-checkbox
              >
            </a-form-item>
          </a-col>
        </a-row>
      </a-form>
      <div style="display: flex; justify-content: end" v-if="!form.id">
        <a-button @click="handleCancel">取消</a-button>
        <a-button type="primary" @click="handleOk" style="margin-left: 10px"
          >确定</a-button
        >
      </div>
    </div>
  </a-modal>
</template>

<script setup lang="ts">
import {ref} from "vue";
import {getAddressList} from "@/utils/common";
import {phone, email} from "@/utils/rules";
import {message} from "ant-design-vue";
import {
  createMemberAddress,
  receivingAddressDetail
} from "@/api/orderManagement/behalfConsumer";
const props = defineProps(["membersId", "bodyId"]);
/* modal ------ start*/
const open = ref<boolean>(false);
const title = ref<string>("");
const modalLoadding = ref<boolean>(false);
const form: any = ref({});
const formRef = ref();
// 打开
const add = (type, id = 0) => {
  operatorType.value = type;
  if (type == 1) {
    if (id) {
      modalLoadding.value = true;
      title.value = "收货地址详情";
      open.value = true;
      receivingAddressDetail({id})
        .then((res) => {
          form.value = res.data;
          address.value = [
            form.value.provinceId,
            form.value.cityId,
            form.value.countyId
          ];
        })
        .finally(() => {
          modalLoadding.value = false;
        });
    } else {
      title.value = "新建收货地址";
      address.value = [];
      open.value = true;
    }
  } else {
    if (id) {
      modalLoadding.value = true;
      title.value = "收票地址详情";
      open.value = true;
      receivingAddressDetail({id})
        .then((res) => {
          form.value = res.data;
          address.value = [
            form.value.provinceId,
            form.value.cityId,
            form.value.countyId
          ];
        })
        .finally(() => {
          modalLoadding.value = false;
        });
    } else {
      title.value = "新建收票地址";
      address.value = [];
      open.value = true;
    }
  }
};
//当前操作的类型
const operatorType = ref(1); //1.收货地址  2.收票地址
const emit = defineEmits(["ok"]);
const handleOk = () => {
  formRef.value.validate().then(() => {
    form.value.isDefault = form.value.isDefault ? true : false;
    form.value.type = operatorType.value;
    form.value.memberId = props.membersId;
    form.value.bodyId = props.bodyId;
    modalLoadding.value = true;
    createMemberAddress(form.value)
      .then(() => {
        message.success("创建成功");
        emit("ok", operatorType.value);
        handleCancel();
      })
      .finally(() => {
        modalLoadding.value = false;
      });
  });
};
const handleCancel = () => {
  formRef.value.clearValidate();
  form.value = {};
  open.value = false;
};
// 地区数据结构
const options = getAddressList();
const address = ref<Array<any>>([]);
// 选择地区
function onCascaderSelect(_, selectedOptions) {
  if (selectedOptions != undefined) {
    form.value.province = selectedOptions[0].label;
    form.value.provinceId = selectedOptions[0].value;
    form.value.city = selectedOptions[1].label;
    form.value.cityId = selectedOptions[1].value;
    form.value.county = selectedOptions[2].label;
    form.value.countyId = selectedOptions[2].value;
  } else {
    form.value.province = null;
    form.value.provinceId = null;
    form.value.city = null;
    form.value.cityId = null;
    form.value.county = null;
    form.value.countyId = null;
  }
}
// 搜索地区
const filter = (inputValue, path) => {
  return path.some(
    (option) =>
      option.label.toLowerCase().indexOf(inputValue.toLowerCase()) > -1
  );
};

// 暴露方法
defineExpose({add});
/* modal ------ end*/
</script>

<style lang="less" scoped></style>
